{% extends 'base.html' %}
{% load static %}
{% load widget_tweaks %}

{% block title %}{{ title|default:"编辑失分明细" }}{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'score/css/loss_detail_form.css' %}">
{% endblock %}

{% block content %}
    <div class="loss-detail-form">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10 col-xl-8">
                    <div class="loss-detail-card card">
                        <!-- 卡片头部 -->
                        <div class="loss-detail-card-header card-header">
                            <h4 class="mb-0">
                                <i class="bi bi-pencil-square"></i>
                                {{ title|default:"编辑失分明细" }}
                            </h4>
                            <a href="{{ back_url|default:'javascript:history.back()' }}" class="back-link">
                                <i class="bi bi-arrow-left-short"></i> 返回
                            </a>
                        </div>

                        <div class="loss-detail-card-body card-body">
                            <!-- 全局错误提示 -->
                            {% if form.non_field_errors %}
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                        <strong>提交失败：</strong>
                                        {% for error in form.non_field_errors %}
                                            <span class="ms-1">{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                            aria-label="Close"></button>
                                </div>
                            {% endif %}

                            <form method="post" novalidate id="lossDetailForm">
                                {% csrf_token %}

                                <!-- 关联成绩信息 -->
                                <div class="exam-info-section">
                                    <h5>
                                        <i class="bi bi-bar-chart-fill"></i>
                                        关联成绩信息
                                    </h5>
                                    <div class="info-grid">
                                        <div class="info-item">
                                            <span class="info-label">考试名称</span>
                                            <span class="info-value">{{ exam_record.exam.name|default:"未关联考试" }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="info-label">考试科目</span>
                                            <span class="info-value">{{ exam_record.subject.name|default:"未关联科目" }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="info-label">得分情况</span>
                                            <span class="info-value">{{ exam_record.score|default:0 }} / {{ exam_record.subject.full_score|default:0 }}</span>
                                        </div>
                                    </div>
                                    <div class="warning-banner">
                                        <i class="bi bi-exclamation-triangle"></i>
                                        注意：当前最多可添加/修改 <strong>{{ max_allowed_loss|default:0 }}</strong>
                                        分的失分明细
                                    </div>
                                </div>

                                <!-- 表单字段 -->
                                <div class="form-section">
                                    <!-- 失分类型 -->
                                    <div class="mb-4">
                                        <label for="{{ form.loss_type.id_for_label }}" class="form-label">
                                            <i class="bi bi-tag"></i>
                                            失分类型
                                            <span class="required-star">*</span>
                                        </label>
                                        {% if form.loss_type.errors %}
                                            <div class="invalid-feedback">
                                                {% for error in form.loss_type.errors %}{{ error }}{% endfor %}
                                            </div>
                                            {{ form.loss_type|add_class:"form-select is-invalid" }}
                                        {% else %}
                                            {{ form.loss_type|add_class:"form-select" }}
                                        {% endif %}
                                        <div class="form-text">选择失分的具体原因，便于后续统计分析</div>
                                    </div>

                                    <!-- 知识点选择 -->
                                    <div class="mb-4">
                                        <label class="form-label">
                                            <i class="bi bi-lightbulb"></i>
                                            关联知识点
                                            <span class="required-star">*</span>
                                        </label>
                                        {% if form.knowledge_point.errors %}
                                            <div class="invalid-feedback">
                                                {% for error in form.knowledge_point.errors %}{{ error }}{% endfor %}
                                            </div>
                                        {% endif %}
                                        <div class="input-group">
                                            {% if form.knowledge_point.errors %}
                                                {{ form.knowledge_point|add_class:"form-select is-invalid" }}
                                            {% else %}
                                                {{ form.knowledge_point|add_class:"form-select" }}
                                            {% endif %}
                                            <button type="button" id="toggle-custom-knowledge" class="btn btn-primary">
                                                <i class="bi bi-plus-circle"></i> 添加自定义
                                            </button>
                                        </div>
                                        <div class="form-text">选择已有知识点，无匹配项可添加自定义知识点</div>
                                    </div>

                                    <!-- 自定义知识点 -->
                                    <div id="custom-knowledge-container" class="custom-knowledge-toggle d-none">
                                        {% if form.custom_knowledge_point.errors %}
                                            <div class="invalid-feedback">
                                                {% for error in form.custom_knowledge_point.errors %}
                                                    {{ error }}{% endfor %}
                                            </div>
                                            {{ form.custom_knowledge_point|add_class:"form-control is-invalid"|attr:"placeholder:请输入新的知识点名称（如：一元二次方程求根公式）" }}
                                        {% else %}
                                            {{ form.custom_knowledge_point|add_class:"form-control"|attr:"placeholder:请输入新的知识点名称（如：一元二次方程求根公式）" }}
                                        {% endif %}
                                        <div class="form-text">自定义知识点会自动关联当前科目，供后续复用</div>
                                    </div>

                                    <!-- 失分分值 -->
                                    <div class="mb-4">
                                        <label for="{{ form.points.id_for_label }}" class="form-label">
                                            <i class="bi bi-currency-dollar"></i>
                                            失分分值
                                            <span class="required-star">*</span>
                                        </label>
                                        {% if form.points.errors %}
                                            <div class="invalid-feedback">
                                                {% for error in form.points.errors %}{{ error }}{% endfor %}
                                            </div>
                                            <div class="input-group">
                                                {{ form.points|add_class:"form-control is-invalid"|attr:"step:0.5"|attr:"min:0" }}
                                                <span class="input-group-text">分</span>
                                            </div>
                                        {% else %}
                                            <div class="input-group">
                                                {{ form.points|add_class:"form-control"|attr:"step:0.5"|attr:"min:0" }}
                                                <span class="input-group-text">分</span>
                                            </div>
                                        {% endif %}
                                        <div class="form-text">
                                            支持0.5分精度，请勿超过当前允许的最大失分（{{ max_allowed_loss|default:0 }}分）
                                        </div>
                                    </div>

                                    <!-- 题号 -->
                                    <div class="mb-4">
                                        <label for="{{ form.question_number.id_for_label }}" class="form-label">
                                            <i class="bi bi-hash"></i>
                                            对应题号
                                        </label>
                                        {% if form.question_number.errors %}
                                            <div class="invalid-feedback">
                                                {% for error in form.question_number.errors %}{{ error }}{% endfor %}
                                            </div>
                                            {{ form.question_number|add_class:"form-control is-invalid"|attr:"placeholder:例如：1、2-3、多选第5题、大题第二问" }}
                                        {% else %}
                                            {{ form.question_number|add_class:"form-control"|attr:"placeholder:例如：1、2-3、多选第5题、大题第二问" }}
                                        {% endif %}
                                        <div class="form-text">清晰标注对应题号，便于后续针对性复习</div>
                                    </div>

                                    <!-- 详细描述 -->
                                    <div class="mb-4">
                                        <label for="{{ form.description.id_for_label }}" class="form-label">
                                            <i class="bi bi-chat-left-text"></i>
                                            错误原因描述
                                        </label>
                                        {% if form.description.errors %}
                                            <div class="invalid-feedback">
                                                {% for error in form.description.errors %}{{ error }}{% endfor %}
                                            </div>
                                            {{ form.description|add_class:"form-control is-invalid"|attr:"rows:3"|attr:"placeholder:请描述错误原因（如：计算时符号错误）、涉及的核心知识点、后续改进方法等" }}
                                        {% else %}
                                            {{ form.description|add_class:"form-control"|attr:"rows:3"|attr:"placeholder:请描述错误原因（如：计算时符号错误）、涉及的核心知识点、后续改进方法等" }}
                                        {% endif %}
                                        <div class="form-text">详细描述有助于加深记忆，避免重复犯错</div>
                                    </div>

                                    <!-- 复习日期 -->
                                    <div class="mb-4">
                                        <label for="{{ form.review_date.id_for_label }}" class="form-label">
                                            <i class="bi bi-calendar-event"></i>
                                            复习日期
                                        </label>
                                        {% if form.review_date.errors %}
                                            <div class="invalid-feedback">
                                                {% for error in form.review_date.errors %}{{ error }}{% endfor %}
                                            </div>
                                            {{ form.review_date|add_class:"form-control is-invalid" }}
                                        {% else %}
                                            {{ form.review_date|add_class:"form-control" }}
                                        {% endif %}
                                        <div class="form-text">记录计划/实际复习该知识点的日期，便于跟踪复习进度</div>
                                    </div>

                                    <!-- 是否已掌握 -->
                                    <div class="mb-4 form-check">
                                        {{ form.is_understand|add_class:"form-check-input" }}
                                        <label for="{{ form.is_understand.id_for_label }}" class="form-check-label">
                                            <i class="bi bi-check-circle"></i>
                                            该知识点是否已掌握
                                        </label>
                                        {% if form.is_understand.errors %}
                                            <div class="invalid-feedback">
                                                {% for error in form.is_understand.errors %}{{ error }}{% endfor %}
                                            </div>
                                        {% endif %}
                                        <div class="form-text">标记为"已掌握"后，后续复习可优先聚焦未掌握的知识点</div>
                                    </div>
                                </div>

                                <!-- 表单按钮 -->
                                <div class="form-actions">
                                    <a href="{{ back_url|default:'javascript:history.back()' }}"
                                       class="btn btn-outline-secondary">
                                        <i class="bi bi-arrow-left"></i> 返回
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-save"></i> 保存修改
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script>
        // 将Django变量传递给JavaScript
        const MAX_ALLOWED_LOSS = {{ max_allowed_loss|default:0 }};
    </script>
    <script src="{% static 'score/js/loss_detail_form.js' %}"></script>
{% endblock %}